<template>
  <div>
    <!-- 顶部导航 -->
    <van-nav-bar class="topNaV" @click-left="onClickLeft">
      <template  #title>
        <p class="title">{{title}}</p>
      </template>
      <template  #left>
        <van-icon name="arrow-left" color="#666666" />
        <p class="left">返回</p>
      </template>
    </van-nav-bar>

    <!-- 展示banner图片 -->
    <div class="banner">
      <img :src="banner" alt="" class="banner-img">
    </div>
    <!-- 第三部分 -->
    <div class="goodShow">
      <div class="goodShow-title">
        <div :class="index == 1 ? 'active' : ''" @click="handle(1)">
          <p>综合</p>
        </div>
        <div :class="index == 2 ? 'active' : ''" @click="handle(2)">
          <div class="cate-price">
            <div class="title-price">价格</div>
            <div class="icon-box">
              <van-icon
                class="up"
                name="arrow-up"
                :color="flag == 'up' ? '#CEA62A' : '#C1C1C1'"
              />
              <van-icon
                class="down"
                name="arrow-down"
                :color="flag == 'down' ? '#CEA62A' : '#C1C1C1'"
              />
            </div>
          </div>
        </div>
        <div :class="index == 3 ? 'active' : ''" @click="handle(3)">
          <p>分类</p>
        </div>
      </div>
      <!-- 分割线 -->
      <van-divider class="br" />
      <div class="goods">
        <div v-for="item in list" :key="item.id" class="goods-item" @click="goodDetail(item)">
          <img :src="item.list_pic_url" alt="" class="goods-img" />
          <p class="goods-name">{{ item.name }}</p>
          <p class="goods-price">{{ item.retail_price }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { goods } from '@/api/index.js'
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const list = ref([])
const route = useRoute()
const router = useRouter()
const title = ref('')
const obj = ref({
  isHot: '',
  isNew: ''
})
const index = ref('')
const flag = ref('')
const banner = ref('')
console.log(route)
onMounted(() => {
  if (route.params.val === 'isNew') {
    obj.value.isNew = '1'
    title.value = '新品首发'
    obj.value.isHot = ''
    banner.value = 'http://jinglins.gitee.io/bufan-tesco-mall/assets/new-list-banner-b691c95d.png'
  } else if (route.params.val === 'isHot') {
    obj.value.isHot = '1'
    obj.value.isNew = ''
    title.value = '人气推荐'
    banner.value = 'http://jinglins.gitee.io/bufan-tesco-mall/assets/hot-list-banner-ccf22d3f.png'
  } else {
    alert('错误了')
  }
  init()
})

const init = () => {
  goods(obj.value).then(res => {
    list.value = res.data
  })
}
const handle = (num) => {
  index.value = num
  if (num === 2) {
    if (!flag.value) {
      flag.value = 'up'
      obj.value.order = 'desc'
    } else {
      if (flag.value === 'up') {
        flag.value = 'down'
        obj.value.order = 'asc'
      } else {
        flag.value = 'up'
        obj.value.order = 'desc'
      }
    }
  } else {
    flag.value = ''
    obj.value.order = ''
  }
  init()
}
const onClickLeft = () => {
  router.back()
}
const goodDetail = (obj) => {
  router.push({ name: 'categoryDetail', params: { id: obj.id } })
}

</script>
<script>
export default {
  name: 'goodsList'
}
</script>

<style scoped lang="scss">
.goodShow {
  //display: flex;
  //justify-content: space-evenly;
  .goodShow-title {
    .active {
      p {
        color: #cea62a;
      }
      .cate-price {
        .title-price {
          color: #cea62a;
        }
      }
    }
    width: 710px;
    height: 40px;
    margin: 0 auto 18px;
    display: flex;
    justify-content: space-evenly;
    div {
      width: 235px;
      height: 40px;
      font-size: 28px;
      color: #212121;
      letter-spacing: 0;
      font-weight: 400;
      height: 40px;
      line-height: 40px;

      p {
        font-size: 28px;
        color: #212121;
        letter-spacing: 0;
        font-weight: 400;
        height: 40px;
        line-height: 40px;
        padding: 0;
        margin: 0;
      }

      .cate-price {
        width: 87px;
        height: 40px;
        margin: 0 auto;
        display: flex;
        .title-price {
          width: 56px;
          font-size: 28px;
          color: #212121;
          letter-spacing: 0;
          font-weight: 400;
          height: 40px;
          line-height: 40px;
        }
        .icon-box {
          width: 29px;
          height: 40px;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          align-content: center;
          .up {
            width: 29px;
            height: 20px;
          }
          .down {
            width: 29px;
            height: 20px;
          }
        }
      }
    }
  }
}
.goods {
  //display: flex;
  width: 710px;
  margin: 0 auto;
  overflow: hidden;
}
.goods-item {
  //display: flex;
  width: 350px;
  float: left;
}
.goods-img {
  width: 350px;
  height: 339px;
}

.topNav {
  .nav-left {
    .left {
      font-size: 31.2px;
      color: #666666;
      letter-spacing: 0;
      font-weight: 400;
    }
  }
  .nav-title {
    .title {
      font-size: 36px;
      color: #333333;
      letter-spacing: 0;
      font-weight: 500;
    }
  }
}
.banner{
  .banner-img{
    width: 750px;
    height: 326px;

  }
}
</style>
